<template>
	<view class="demo">
		<!-- :mask-close-able='false'-->
		<u-popup v-model="willShow" mode="center" border-radius="20" :closeable="true" close-icon-color="#ffffff"
			@close="Maskclose">
			<img :src="base64data" v-if="baseShow" :style="{ width: '300px', height: canvasH + 'px' }"></img>
			<canvas v-else :style="{ width: '300px', height: canvasH + 'px' }" canvas-id="myCanvas"
				id="myCanvas"></canvas>

			<!-- #ifndef H5 -->
			<view class="btns" :style="{ backgroundColor:`${btnColor}`, }" @click="saveImg">
				保存到手机
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view v-if="baseShow" class="textTlign m_b_30">
				H5请长按图片保存到手机
			</view>
			<!-- #endif -->
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: "sharePoster",
		props: {
			show: { // 弹窗的显示状态
				type: Boolean,
				default: false
			},
			btnColor: { // "保存到手机"按钮的颜色 默认为黑色
				type: String,
				default: "#000000"
			},
			goodsInfo: { // 绘制海报的商品参数
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				imgurl:"",
				baseShow: false,
				base64data: "",
				base64nohead: "",
				willShow: this.show,
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				SystemInfo: {}, // 设备信息
				goodsImg: {}, // 商品主图
				ewmImg: {}, // 二维码图片
				ewmW: 100, // 二维码大小
			}
		},
		async created() {
			console.log("俺进来了");
			console.log("this.show",this.show);
			/* if (!this.show) {
				return false
			} */
			// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			this.SystemInfo = await this.getSystemInfo();
			console.log("this.SystemInfo", this.SystemInfo);
			// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
			// this.goodsImg = await this.getImageInfo('../../static/bgImg/fensi.png');
			this.ewmImg = await this.getImageInfo(this.goodsInfo.qrcode);
			this.goodsImg = await this.getImageInfo(this.goodsInfo.shareImg);
			console.log("this.goodsImg", this.goodsImg);
			this.canvasW = 300 //this.SystemInfo.windowWidth; // 画布宽度
			this.canvasH = 320 + this.ewmW + 25; // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
			// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
			if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo
				.errMsg == 'getSystemInfo:ok') {
				console.log('ok')
				uni.showToast({
					icon: 'loading',
					mask: true,
					duration: 10000,
					title: '海报绘制中',
				});
				setTimeout(() => {
					var ctx = uni.createCanvasContext('myCanvas', this);
					// 填充背景色，白色
					ctx.setFillStyle('#fff'); // 默认白色
					ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

					// 绘制商品主图，二维码
					ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this.canvasW)
					// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					ctx.drawImage(this.ewmImg.path, this.canvasW - 110, this.canvasW + 20, this.ewmW, this
						.ewmW)
					// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)

					// 3、绘制商品标题，多余文字自动换行
					ctx.setFontSize(16); // setFontSize() 设置字体字号
					ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色

					/* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
					let _strlineW = 0;
					let _strLastIndex = 0; //每次开始截取的字符串的索引
					let _strHeight = this.canvasW + 30; //绘制字体距离canvas顶部的初始高度
					let _num = 1;
					for (let i = 0; i < this.goodsInfo.title.length; i++) {
						_strlineW += ctx.measureText(this.goodsInfo.title[i]).width;
						if (_strlineW > this.canvasW - 155) {
							if (_num == 2 && 2) {
								//文字换行数量大于二进行省略号处理
								ctx.fillText(this.goodsInfo.title.substring(_strLastIndex, i - 5) + '...', 10,
									_strHeight);
								_strlineW = 0;
								_strLastIndex = i;
								_num++;
								break;
							} else {
								ctx.fillText(this.goodsInfo.title.substring(_strLastIndex, i), 10, _strHeight);
								_strlineW = 0;
								_strHeight += 20;
								_strLastIndex = i;
								_num++;
							}
						} else if (i == this.goodsInfo.title.length - 1) {
							ctx.fillText(this.goodsInfo.title.substring(_strLastIndex, i + 1), 10, _strHeight);
							_strlineW = 0;
						}
					}
					/* end */

					//4、商品价格
					ctx.setFontSize(16) // 字号
					ctx.setFillStyle('#e31d1a') // 颜色
					ctx.fillText('￥' + this.goodsInfo.price, 10, this.canvasW + 75); // （文字，x，y）
					ctx.setFontSize(12)
					ctx.setFillStyle('#b8b8b8')
					ctx.fillText('原价￥' + this.goodsInfo.Oldprice, 100, this.canvasW + 75);

					// 5、邀请信息
					ctx.setFontSize(16)
					ctx.setFillStyle('#333')
					ctx.fillText(this.goodsInfo.name + '推荐给你', 10, this.canvasW + 100);

					ctx.setFontSize(14)
					ctx.setFillStyle('#b8b8b8')
					ctx.fillText('长按或扫描识别二维码', 10, this.canvasW + this.ewmW + 20);


					ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
						// #ifdef MP-WEIXIN
						console.log(ret)
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '绘制完成',
						});
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'myCanvas',
							quality: 1,
							complete: (res) => {
								// 在H5平台下，tempFilePath 为 base64, 
								// 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
								console.log("小程序绘制后res =>", res);
								this.imgurl = res.tempFilePath
								if (res.tempFilePath) {
									// 小程序中，将res.tempFilePath转为base64,并保存图片
									uni.getFileSystemManager().readFile({
										filePath: res.tempFilePath,
										encoding: 'base64',
										success: res => {
											//console.log(res.data);
											let base64 =
												'data:image/png;base64,' + res
												.data;
											this.base64nohead = res.data
											this.base64data = base64
											this.$emit("getImg", base64)
										}
									})
								}
							},
						}, this) // 这里是新增的this，只有在微信小程序中需要加入，不然会报错
						// #endif

						// #ifndef MP-WEIXIN
						console.log(ret)
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '绘制完成',
						});
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'myCanvas',
							quality: 1,
							complete: (res) => {
								// 在H5平台下，tempFilePath 为 base64, 
								// 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
								console.log(res)
								this.$emit("getImg", res.tempFilePath)
								// #ifdef H5
								this.base64nohead = res.tempFilePath.slice(22)
								// #endif
								this.base64data = res.tempFilePath
								// #ifdef H5
								this.baseShow = true
								// #endif								
							},
						})
						// #endif
					});
				}, 1500)
			} else {
				console.log('err')
			}
			// this.NewgetBase64(this.goodsInfo.shareImg)
		},
		methods: {
			Maskclose() { // 在关闭弹窗后执行发射事件改变父组件中boolean值
				console.log("子组件关闭弹窗事件发射");
				this.$emit("Maskclose")
			},
			saveImg() { // 保存图片
				// #ifdef H5
				// H5的点击保存事件
				this.savePic(this.base64data)
				// #endif

				// #ifdef MP-WEIXIN
				this.wxSaveImg()
				// #endif

				// #ifdef APP
				this.saveImgFile(this.base64data)
				// #endif
			},
			saveImgFile(url) { // APP保存doc文件
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none'
						})
						// bitmap.clear()
					},
					fail: (err) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						console.log(err);
					}
				});
			},
			wxSaveImg() { // 微信小程序保存图片
				uni.downloadFile({
						url: this.imgurl,
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: (r) => {
									this.$u.sToast('保存成功!')
								},
								fail: (error) => {
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res);
														uni.showToast({
															title: "请重新点击分享保存图片～",
															icon: "none"
														});
													}
												})
											} else {
												uni.showToast({
													title: "保存失败，请打开权限功能重试",
													icon: "none"
												});
											}
										}
									})
								}
							})
						},
						fail: (err) => {
							this.$u.toast('下载失败!')
						}
					})
			},
		savePic(base64) { // H5的点击保存事件
			var arr = base64.split(',');
			var bytes = atob(arr[1]);
			let ab = new ArrayBuffer(bytes.length);
			let ia = new Uint8Array(ab);
			for (let i = 0; i < bytes.length; i++) {
				ia[i] = bytes.charCodeAt(i);
			}
			var blob = new Blob([ab], {
				type: 'application/octet-stream'
			});
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = new Date().valueOf() + ".png";
			var e = document.createEvent('MouseEvents');
			e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			a.dispatchEvent(e);
			URL.revokeObjectURL(url);
		},
		// 获取图片信息
		getImageInfo(image) {
			return new Promise((req, rej) => {
				uni.getImageInfo({
					src: image,
					success: function(res) {
						req(res)
					},
				});
			})
		},

		// 获取设备信息
		getSystemInfo() {
			return new Promise((req, rej) => {
				uni.getSystemInfo({
					success: function(res) {
						req(res)
					}
				});
			})
		},
	}
	}
</script>
<style lang="scss">
	.btns {
		text-align: center;
		width: 100%;
		font-size: 32rpx;
		margin: auto;
		width: 85%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
	.textTlign{
		text-align: center;
	}
</style>
